<template>
  <div class="process-template-management">
    <div class="process-template-management-toolbar">
      <div class="toolbar-left">
        <ty-select-content @selectedContent="selectedContent"></ty-select-content>
        <el-divider direction="vertical" />
        {{ userID2 }}
        <ty-plm-button
          @click="openDialog('create')"
          :options="{ title: proxy.$t('btn.create'), iconClass: 'iconfont font-12 icon-xinjian2' }"
        ></ty-plm-button>
        <ty-plm-button
          @click="openDialog('import')"
          :options="{ type: 'neutral', title: proxy.$t('btn.import'), iconClass: 'iconfont font-14 icon-daoru1' }"
        ></ty-plm-button>
        <ty-plm-button
          @click="exportProcessTemplate"
          :options="{ type: 'neutral', title: proxy.$t('btn.export'), iconClass: 'iconfont font-14 icon-daochu1' }"
        ></ty-plm-button>
      </div>
      <div class="toolbar-right">
        <ty-plm-input
          class="toolbar-right-search-input"
          v-model="getGridDataParam.queryConditions.nameCodeLike"
          :options="{
            placeholder: proxy.$t('searchKeywords'),
            clearable: true
          }"
          :suffix-icon="Search"
          @keydown.enter.prevent="getTableData"
          @clear="getTableData"
        ></ty-plm-input>
        <ty-plm-button
          class="toolbar-right-refresh"
          @click="getTableData"
          :options="{ type: 'icon', iconClass: 'iconfont font-14 icon-shuaxin' }"
        ></ty-plm-button>
      </div>
    </div>
    <ty-plm-grid
      :options="gridOptions"
      @checkbox-change="handleSelectionChange"
      @checkbox-all="handleSelectionChange"
      ref="processTemplateGridRef"
      class="process-template-management-grid"
    >
      <template #name="{ row }">
        <span class="process-template-management-grid-name" @click="previewTemp(row)">{{ row.name }}</span>
      </template>
      <template #version="{ row }">
        {{ `${row.workFlowVersion}.${row.modelVersion}` }}
      </template>
      <template #status="{ row }">
        <el-tooltip
          :content="row.updatorName"
          :disabled="
            row.status == 1 || (row.lockeroid && row.lockeroid == userID) || !row.lockeroid || !row?.updatorName
          "
        >
          <div :class="currentRowStatus(row).class">{{ currentRowStatus(row).label }}</div>
        </el-tooltip>
      </template>
      <template #visible="{ row }">
        <div class="grid-column-visible">
          <template v-if="row.status == 1 || (row.lockeroid && row.lockeroid == userID) || !row.lockeroid">
            <el-tooltip :content="row.visible === 1 ? proxy.$t('display') : proxy.$t('hide')">
              <em class="grid-column-visible-icon" :class="currentRowVisible(row)" @click="visibleIconClick(row)"></em>
            </el-tooltip>
          </template>
          <template v-else>
            <!-- modify by fengc 2024/4/17 不可修改时，色值调整 -->
            <el-tooltip :content="row.visible === 1 ? proxy.$t('display') : proxy.$t('hide')">
              <em :class="currentRowVisible(row)" class="grid-column-visible-disabled"></em>
            </el-tooltip>
          </template>
        </div>
      </template>
      <template #updator="{ row }">
        <ty-plm-user
          :row="row"
          :userObj="{ account: row.updatorUserName, subValue: row.updatorUserName }"
          :value="row.updatorFullName"
        ></ty-plm-user>
      </template>
      <template #creator="{ row }">
        <ty-plm-user
          :row="row"
          :userObj="{ account: row.creatorUserName, subValue: row.creatorUserName }"
          :value="row.creatorFullName"
        ></ty-plm-user>
      </template>
      <template #enable="{ row }">
        <ty-plm-switch
          v-model="row.disabled"
          @change="disabledChagne(row, $event)"
          :options="{
            type: 'warn',
            needConfirm: true,
            teleported: false,
            activeValue: 0,
            inactiveValue: 1,
            confirmActiveMessage: proxy.$t('confirmStartTem'),
            confirmInactiveMessage: proxy.$t('confirmStopTem'),
            confirmPopperWidth: 200,
            disabled: row.status == 0 && row.lockeroid && row.lockeroid !== userID
          }"
        ></ty-plm-switch>
      </template>
      <template #operate="{ row }">
        <grid-operate
          :defaultOperate="gridDefaultOperate(row)"
          @gridButtonClick="gridButtonClick(row, $event)"
        ></grid-operate>
      </template>
    </ty-plm-grid>
    <ty-plm-pagination
      class="process-template-management-pagination"
      :options="paginationOpt"
      @page-change="getTableData"
    ></ty-plm-pagination>

    <!-- 创建/编辑/另存为流程模版 -->
    <temp-create
      v-model="tempCreateVisible"
      :optionType="curOptionType"
      :contentData="curContentData"
      :workFlow="curWorkFlow"
      @refreshGrid="refreshTableData"
      @designTemp="designProcessTemplate"
    ></temp-create>

    <!-- 导入流程模版 -->
    <temp-import
      v-model="tempImportVisible"
      :contentData="curContentData"
      @refreshGrid="refreshTableData"
    ></temp-import>

    <!-- 预览流程模板 -->
    <temp-preview
      v-model="tempPreviewVisible"
      :previewType="previewType"
      :workFlow="curWorkFlow"
      :userID="userID"
      @deleteTemp="deleteTemp"
      @saveAsTemp="openDialog('saveAs')"
      @designTemp="designProcessTemplate(curWorkFlow)"
    ></temp-preview>

    <!-- 流程模版历史记录 -->
    <temp-version
      v-model="tempVersionVisible"
      :workFlow="curWorkFlow"
      @saveAsTemp="tempVersionSaveAsTemp"
      @preViewTemp="tempVersionPreViewTemp"
    ></temp-version>

    <!-- 确认删除 -->
    <temp-delete
      v-model="tempDeleteVisible"
      v-bind="tempDeleteOptions"
      @confirm="tempDeleteConfirm"
      @close="tempDeleteClose"
    ></temp-delete>
  </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
const config = window.tyRoot.tyGetMixinResource('basic/business-modules/process-template-management/config/config.js');
const gridOperate = window.tyRoot.tyGetMixinResource(
  'basic/business-modules/process-template-management/views/components/grid-operate.vue'
);
const tempCreate = window.tyRoot.tyGetMixinResource(
  'basic/business-modules/process-template-management/views/components/process-template-create.vue'
);
const tempImport = window.tyRoot.tyGetMixinResource(
  'basic/business-modules/process-template-management/views/components/process-template-import.vue'
);
const tempPreview = window.tyRoot.tyGetMixinResource(
  'basic/business-modules/process-template-management/views/components/process-template-preview.vue'
);
const tempVersion = window.tyRoot.tyGetMixinResource(
  'basic/business-modules/process-template-management/views/components/process-template-version.vue'
);
const tempDelete = window.tyRoot.tyGetMixinResource(
  'basic/business-modules/process-template-management/views/components/process-template-delete.vue'
);
// import gridOperate from '@/basic/business-modules/process-template-management/views/components/grid-operate.vue';
// import config from '@/basic/business-modules/process-template-management/config/config.js';
// import tempCreate from '@/basic/business-modules/process-template-management/views/components/process-template-create.vue';
// import tempImport from '@/basic/business-modules/process-template-management/views/components/process-template-import.vue';
// import tempPreview from '@/basic/business-modules/process-template-management/views/components/process-template-preview.vue';
// import tempVersion from '@/basic/business-modules/process-template-management/views/components/process-template-version.vue';
// import tempDelete from '@/basic/business-modules/process-template-management/views/components/process-template-delete.vue';
const { proxy } = getCurrentInstance();
const gridOptions = ref({
  loading: false,
  height: '600',
  align: null,
  rowConfig: {
    height: 34,
    isHover: true,
    isCurrent: true
  },
  columnConfig: {
    resizable: true
  },
  scrollY: {
    enabled: true,
    gt: 10
  },
  showOverflow: true,
  showHeaderOverflow: true,
  columns: config.gridColumns,
  data: []
});
const gridAllOperate = config.gridOperateConfig;
let getGridDataParam = reactive({
  pageInfo: {
    curPage: 1,
    pageSize: 20
  },
  queryConditions: {
    nameCodeLike: '',
    containerOid: '',
    containerOtype: ''
  }
});
let paginationOpt = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
});
let tempDeleteOptions = reactive({
  title: '',
  type: '',
  tips: '',
  workFlowList: []
});
let curContentData = reactive({});
let curOptionType = reactive('');
let curWorkFlow = reactive({});
let tempVersionVisible = ref(false);
let tempImportVisible = ref(false);
let tempCreateVisible = ref(false);
let tempPreviewVisible = ref(false);
let tempDeleteVisible = ref(false);
let selection = ref([]);
let userID = ref(null);
let userID2 = ref(21332);
let previewType = ref(null);
let tempDeleteParam = ref(null);
const processTemplateGridRef = ref(null);

const currentRowStatus = computed(() => {
  return row => {
    if (row.status === 1) {
      return {
        label: proxy.$t('published'),
        class: 'status-published'
      };
    } else {
      if (!!row?.lockeroid && row?.lockeroid !== userID.value) {
        return {
          label: proxy.$t('othersModifications'),
          class: 'status-othersModifications'
        };
      } else {
        return {
          label: proxy.$t('underModification'),
          class: 'status-underModification'
        };
      }
    }
  };
});
const currentRowVisible = computed(() => {
  return row => {
    let str = `iconfont font-14 `;
    if (row.visible === 1) {
      str = `${str} icon-kejian`;
    } else {
      str = `${str} icon-bukejian`;
    }
    return str;
  };
});
const gridDefaultOperate = computed(() => {
  return row => {
    let operateObj = {
      'c/i': ['design', 'edit', 'saveAs', 'export', 'version', 'delete'],
      'c/o': ['saveAs'],
      // modify by fengc 2024/5/8 未发布状态不展示删除按钮
      wrk: ['design', 'edit', 'revokeEdit', 'release', 'saveAs', 'export', 'version']
    };
    let flag = '';
    if (row.status === 1) {
      flag = 'c/i';
    } else {
      if (!!row?.lockeroid && row?.lockeroid !== userID.value) {
        flag = 'c/o';
      } else {
        flag = 'wrk';
      }
    }
    return gridAllOperate.filter(item => {
      if (item.command == 'revokeEdit') {
        return operateObj[flag].indexOf(item.command) > -1 && !!row.deploymentVersion;
      }
      return operateObj[flag].indexOf(item.command) > -1;
    });
  };
});
/**
 * @description 提示弹窗确认
 * @Author fengc
 * @Date 2024-03-22 13:46:42
 */
function tempDeleteConfirm() {
  delelteTemp();
}
/**
 * @description 提示弹窗关闭
 * @Author fengc
 * @Date 2024-03-22 13:46:58
 */
function tempDeleteClose() {
  tempDeleteVisible.value = false;
}
/**
 * @description 历史记录预览
 * @Author fengc
 * @Date 2024-03-22 23:12:30
 */
function tempVersionPreViewTemp(workFlow) {
  previewType.value = 'tempVersion';
  curWorkFlow = workFlow;
  tempPreviewVisible.value = true;
}

/**
 * @description 历史记录另存为
 * @Author fengc
 * @Date 2024-03-22 23:11:59
 */
function tempVersionSaveAsTemp(workFlow) {
  curOptionType = 'saveAs';
  curWorkFlow = workFlow;
  tempCreateVisible.value = true;
}
/**
 * @description 复选框的勾选事件
 * @author weig
 * @date 2024-02-23 10:10:03
 */
function handleSelectionChange({ records }) {
  selection.value = records;
}
/**
 * @description 预览当前流程模板
 * @Author fengc
 * @Date 2024-03-18 23:05:50
 * @param {Object} row 当前行
 */
function previewTemp(row) {
  // modify by fengc 2024/5/8 刷新预览类型值
  previewType.value = null;
  curWorkFlow = row;
  tempPreviewVisible.value = true;
}
/**
 * @description 可见性切换
 * @Author fengc
 * @Date 2024-03-14 09:57:05
 */
async function visibleIconClick(row) {
  let title = row.visible == 1 ? proxy.$t('confirmHidet') : proxy.$t('confirmShow');
  let msg = row.visible == 1 ? proxy.$t('confirmHidetTem') : proxy.$t('confirmShowTem');
  proxy
    .$tyPlmConfirm({
      title: title,
      message: msg,
      type: 'warning',
      confirmButtonText: proxy.$t('btn.ok'),
      cancelButtonText: proxy.$t('btn.cancel')
    })
    .then(async () => {
      let param = {
        workFlowOidList: [row.workFlowId],
        // modify by fengc 2024/5/23 显示/隐藏使用当前当前选择的上下文
        containerOid: curContentData.oid,
        containerOtype: curContentData.otype,
        visible: row.visible == 1 ? 0 : 1
      };
      const res = await proxy.apiFunTools.commandFunc(
        '$basicapis',
        'process-template-management',
        'batchChangeWorkFlowVisibility',
        param,
        {
          needResponseBody: true
        }
      );
      if (res?.data?.result === 'SUCCESS') {
        row.visible = row.visible == 1 ? 0 : 1;
        this.proxy.$tyPlmMessage({
          type: 'success',
          message: row.visible == 1 ? proxy.$t('showSuc') : proxy.$t('hideSuc')
        });
      }
    })
    .catch(() => {});
}
/**
 * @description 表格操作列按钮事件
 * @Author fengc
 * @Date 2024-03-05 10:46:15
 * @param {String} type 按钮类型
 */
function gridButtonClick(row, type) {
  curWorkFlow = row;
  if (type === 'deleteLatest' || type === 'deleteAll') {
    let param = {
      workFlowIdList: [row.workFlowId],
      deleteType: type === 'deleteLatest' ? 0 : 1
    };
    delelteProcessTemplate(param);
  } else if (type === 'design') {
    designProcessTemplate(row);
  } else if (type === 'release') {
    publishProcessTemplate(row);
  } else if (type === 'revokeEdit') {
    revokeEditProcessTemplate(row);
  } else if (type === 'export') {
    exportRowProcessTemplate([row.workFlowId]);
  } else {
    openDialog(type);
  }
}
/**
 * @description 设计流程模版
 * @Author fengc
 * @Date 2024-03-22 23:50:29
 * @return {*}
 */
function designProcessTemplate(workFlow) {
  window.$wujie?.bus.$emit('designProcessTemplate', workFlow);
  if (tempPreviewVisible.value) {
    tempPreviewVisible.value = false;
  }
  if (tempVersionVisible.value) {
    tempVersionVisible.value = false;
  }
}
/**
 * @description 导出
 * @Author fengc
 * @Date 2024-03-18 09:28:36
 * @param {Object} row 当前行
 */
async function exportRowProcessTemplate(param) {
  const data = await proxy.apiFunTools.commandDownloadFunc(
    '$basicapis',
    'process-template-management',
    'batchExportBpmnFile',
    param
  );
  if (!data) {
    return;
  }
  if (data.result) {
    this.$tyPlmMessage.error(data.errors);
    return;
  }
  let fileBlod = new Blob([data.data]);
  var reader = new FileReader();
  reader.onload = () => {
    // 内容就在这里
    var content = reader.result;
    // 下载报错处理
    try {
      let resultJSON = JSON.parse(content);
      if (resultJSON.result === 'ERROR') {
        this.$tyPlmMessage({
          message: resultJSON.errors.message
        });
      }
    } catch (error) {
      let urlstr = data.headers['content-disposition'];
      let regex = /"([^"]*)"/g;
      let filename;
      if (urlstr?.indexOf("''") < 0) {
        try {
          filename = regex.exec(urlstr)[1];
        } catch (errorIn) {
          filename = decodeURI(urlstr.split('filename=').pop());
        }
      } else {
        filename = decodeURI(urlstr.substring(urlstr.indexOf("''") + 2));
      }
      let url = window.URL.createObjectURL(fileBlod);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
    }
  };
  reader.readAsText(fileBlod);
}
/**
 * @description 撤销修改
 * @Author fengc
 * @Date 2024-03-18 09:28:36
 * @param {Object} row 当前行
 */
function revokeEditProcessTemplate(row) {
  proxy
    .$tyPlmConfirm({
      title: proxy.$t('deleteTitle'),
      message: proxy.$t('confirmRevokeEdit'),
      type: 'warning',
      confirmButtonText: proxy.$t('btn.ok'),
      cancelButtonText: proxy.$t('btn.cancel')
    })
    .then(async () => {
      gridOptions.value.loading = true;
      let param = { workFlowId: row.workFlowId };
      const res = await proxy.apiFunTools.commandFunc(
        '$basicapis',
        'process-template-management',
        'unEditWorkFlow',
        param,
        {
          needResponseBody: true
        }
      );
      if (res?.data?.result === 'SUCCESS') {
        proxy.$message.success(proxy.$t('message.revokeEditSuccess'));
        getTableData();
      } else {
        gridOptions.value.loading = false;
      }
    })
    .catch(() => {});
}
/**
 * @description 发布当前行
 * @Author fengc
 * @Date 2024-03-18 09:01:06
 * @param {Object} row 当前行
 */
function publishProcessTemplate(row) {
  // modify by fengc 2024/4/17 提示标题调整
  // modify by fengc 2024/4/22 提示内容增加流程模版名称
  proxy
    .$tyPlmConfirm({
      title: proxy.$t('confirmRelease'),
      message: proxy.$t('confirmPublish', { name: row.name }),
      type: 'warning',
      confirmButtonText: proxy.$t('btn.ok'),
      cancelButtonText: proxy.$t('btn.cancel')
    })
    .then(async () => {
      gridOptions.value.loading = true;
      let param = { useFlag: true, workFlowIdList: [row.workFlowId] };
      const res = await proxy.apiFunTools.commandFunc(
        '$basicapis',
        'process-template-management',
        'batchPublishWorkFlow',
        param,
        {
          needResponseBody: true
        }
      );
      if (res?.data?.result === 'SUCCESS') {
        proxy.$tyPlmMessage.success(proxy.$t('message.publishSuccess'));
        getTableData();
      } else {
        gridOptions.value.loading = false;
      }
    })
    .catch(() => {});
}
/**
 * @description 删除当前预览流程模版
 * @Author fengc
 * @Date 2024-03-19 09:33:43
 */
function deleteTemp(workFlow) {
  let param = {
    workFlowIdList: [workFlow.workFlowId],
    deleteType: 0
  };
  delelteProcessTemplate(param);
}
/**
 * @description 删除当前行
 * @Author fengc
 * @Date 2024-03-18 08:33:49
 * @param {Object} row 当前行
 */
function delelteProcessTemplate(param) {
  tempDeleteParam.value = param;
  let tips = param.deleteType === 0 ? proxy.$t('message.deleteLatestTips') : proxy.$t('message.deleteAllTips');
  tempDeleteOptions = {
    title: proxy.$t('confirmDelete'),
    type: 'warning',
    tips: tips,
    objList: [curWorkFlow]
  };
  tempDeleteVisible.value = true;
}
/**
 * @description 调用删除接口
 * @Author fengc
 * @Date 2024-03-24 00:13:26
 */
async function delelteTemp() {
  const res = await proxy.apiFunTools.commandFunc(
    '$basicapis',
    'process-template-management',
    'batchDeleteWorkFlow',
    tempDeleteParam.value,
    {
      needResponseBody: true
    }
  );
  if (res?.data?.result === 'SUCCESS') {
    proxy.$tyPlmMessage.success(proxy.$t('message.deleteSuccess'));
    getTableData();
    if (tempPreviewVisible.value) {
      tempPreviewVisible.value = false;
    }
  }
  if (tempDeleteVisible.value) {
    tempDeleteVisible.value = false;
  }
}
/**
 * @description 打开弹窗
 * @Author fengc
 * @Date 2024-03-18 08:30:18
 * @param {String} type 操作类型
 */
function openDialog(type) {
  if (type === 'create' || type === 'edit' || type === 'saveAs') {
    curOptionType = type;
    tempCreateVisible.value = true;
  } else if (type === 'import') {
    tempImportVisible.value = true;
  } else if (type === 'version') {
    tempVersionVisible.value = true;
  }
}
/**
 * @description 启用/停用事件
 * @Author fengc
 * @Date 2024-02-29 16:59:54
 * @param {Object} row 当前行数据
 * @param {String} value 启用/停用
 */
async function disabledChagne(row, value) {
  let param = {
    workFlowIdList: [row.workFlowId],
    useFlag: !value
  };
  const res = await proxy.apiFunTools.commandFunc(
    '$basicapis',
    'process-template-management',
    'batchEnableOrDisableWorkFlow',
    param,
    {
      needResponseBody: true
    }
  );
  if (res?.data?.result === 'SUCCESS') {
    proxy.$tyPlmMessage({
      type: 'success',
      message: !value ? proxy.$t('enabledSuccess') : proxy.$t('deactivatedSuccess')
    });
  }
}
/**
 * @description 导出流程模版
 * @Author fengc
 * @Date 2024-02-29 11:30:45
 */
function exportProcessTemplate() {
  if (!selection.value.length) return;
  exportRowProcessTemplate(selection.value.map(item => item.workFlowId));
}
/**
 * @description 设置当前选中的上下文
 * @Author fengc
 * @Date 2024-02-29 11:30:16
 * @param {Objec} data 上下文数据
 */
function selectedContent(data) {
  curContentData = data;
  getGridDataParam.queryConditions.containerOid = data.oid;
  getGridDataParam.queryConditions.containerOtype = data.otype;
  getTableData();
}
/**
 * @description 刷新表格
 * @Author fengc
 * @Date 2024-03-18 16:19:52
 */
function refreshTableData() {
  getGridDataParam.pageInfo.curPage = 1;
  getTableData();
}
/**
 * @description 查询表格数据
 * @Author fengc
 * @Date 2024-02-29 11:29:56
 */
async function getTableData() {
  gridOptions.value.loading = true;
  getGridDataParam.pageInfo.curPage = paginationOpt.currentPage;
  getGridDataParam.pageInfo.pageSize = paginationOpt.pageSize;
  let res = await proxy.apiFunTools.commandFunc(
    '$basicapis',
    'process-template-management',
    'getWorkFlowByParams',
    getGridDataParam,
    {
      needResponseBody: true
    }
  );
  if (res.data.result === 'SUCCESS') {
    gridOptions.value.data = res.data.data.list;
    paginationOpt.total = res.data.data.total;
    curWorkFlow = {};
    // modify by fengc 2024/5/8 手动清除选中的行数据
    processTemplateGridRef.value.grid.clearCheckboxReserve();
    selection.value = [];
  }
  gridOptions.value.loading = false;
}
onMounted(() => {
  userID.value = sessionStorage.getItem('userID');
  window.$wujie?.bus.$on('refreshProcessTemplateGrid', () => {
    getTableData();
  });
});

onBeforeUnmount(() => {
  window.$wujie?.bus.$off('refreshProcessTemplateGrid');
});
</script>
<style lang="scss" scoped>
.process-template-management {
  height: calc(100% - 84px);

  .process-template-management-toolbar {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }

  .toolbar-left {
    display: flex;
    align-items: center;

    .el-divider {
      height: 24px;
    }
  }

  .toolbar-right {
    display: flex;
    align-items: center;
  }

  .toolbar-right-search-input {
    width: 160px;
  }

  .toolbar-right-refresh {
    padding: 0 12px !important;
    margin-left: 8px;
  }

  .process-template-management-grid {
    .process-template-management-grid-name {
      cursor: pointer;
      color: var(--ty-ui-main-color);
    }

    .status-published,
    .status-underModification,
    .status-othersModifications {
      line-height: 18px;
      padding: 0 4px;
      border-radius: 4px;
      width: fit-content;
    }

    .status-published {
      background-color: #e2f7e0;
      color: #0e9411;
    }

    .status-underModification {
      background-color: #ebf6ff;
      color: #0073d1;
    }

    .status-othersModifications {
      background-color: #fff4e1;
      color: #f38f47;
    }

    .grid-column-visible {
      width: fit-content;
    }

    .grid-column-visible-icon {
      cursor: pointer;

      &:hover {
        color: var(--ty-ui-main-color);
      }
    }

    .grid-column-visible-disabled {
      color: var(--ty-ui-placeholder-color);
    }

    .grid-column-visible-disabled {
      color: var(--ty-ui-placeholder-color);
    }

    :deep(.all-grid-operate) {
      .vxe-cell {
        overflow: visible;
      }
    }
  }

  .process-template-management-pagination {
    margin-top: 6px;
  }

  .common-button {
    color: var(--ty-ui-main-color);

    &:hover {
      color: var(--ty-ui-main-hover-color);
    }
  }

  :deep(.vxe-table--render-default) {
    .vxe-body--column {
      padding-bottom: 0;
      padding-top: 0;
    }
  }
}
</style>
